Glass Effect Filter

8f:I[903690,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN"],"SWRDataProvider"] 91:T5023,[V0_FILE]typescriptreact:file="components/kokonutui/liquid-glass-card.tsx" "use client"; import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { ArrowRight, ArrowLeft, Play, Pause } from "lucide-react"; import Link from "next/link"; const liquidbuttonVariants = cva( "inline-flex items-center transition-colors justify-center cursor-pointer gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-transparent hover:scale-105 duration-300 transition text-primary", destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 text-xs gap-1.5 px-4 has-[>svg]:px-4", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", xl: "h-12 rounded-md px-8 has-[>svg]:px-6", xxl: "h-14 rounded-md px-10 has-[>svg]:px-8", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "xxl", }, } ); interface LiquidButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } function ButtonGlassFilter() { const filterId = React.useId(); return ( ); } const LiquidButton = React.forwardRef( ( { className, variant, size, asChild = false, children, ...props }, ref ) => { const Comp = asChild ? Slot : "button"; const filterId = React.useId(); return ( <>

{children}

); } ); LiquidButton.displayName = "LiquidButton"; const cardVariants = cva( "relative overflow-hidden rounded-lg transition-all duration-300 group bg-background/20", { variants: { variant: { default: "hover:scale-[1.01] text-foreground backdrop-blur-[2px]", primary: "bg-primary/5 hover:bg-primary/5 text-foreground backdrop-blur-[2px]", destructive: "bg-destructive/5 hover:bg-destructive/10 text-foreground backdrop-blur-[2px]", secondary: "bg-secondary/5 hover:bg-secondary/10 text-foreground backdrop-blur-[2px]", }, size: { default: "p-6", sm: "p-4", lg: "p-8", xl: "p-10", }, hover: { default: "hover:scale-[1.02]", none: "", glow: "hover:shadow-lg hover:shadow-primary/20", }, }, defaultVariants: { variant: "default", size: "default", hover: "default", }, } ); export interface LiquidGlassCardProps extends React.HTMLAttributes, VariantProps { asChild?: boolean; glassEffect?: boolean; } function GlassFilter() { const filterId = React.useId(); return ( ); } // Card Header Component interface CardHeaderProps extends React.HTMLAttributes { title: string; subtitle?: string; icon?: React.ReactNode; } function CardHeader({ title, subtitle, icon, className, ...props }: CardHeaderProps) { return (

{title}

{subtitle && (

{subtitle}

)}

{icon &&

{icon}

}

); } // Card Content Component function CardContent({ className, ...props }: React.HTMLAttributes) { return

; } const LiquidGlassCard = React.forwardRef( ( { className, variant, size, hover, asChild = false, glassEffect = true, children, ...props }, ref ) => { const Comp = asChild ? Slot : "div"; const filterId = React.useId(); return ( {/* Glass effect overlay */}

{/* Glass filter effect */} {glassEffect && (

)} {/* Content */}

{children}

{/* Shine effect on hover */}

{glassEffect && } ); } ); LiquidGlassCard.displayName = "LiquidGlassCard"; // Remove the hello text and fix the time display export function NotificationCenter() { // Track current time and playing state const [isPlaying, setIsPlaying] = React.useState(true); const [currentTime, setCurrentTime] = React.useState(45); const totalDuration = React.useMemo(() => 225, []); // 3:45 in seconds // Format time in MM:SS const formatTime = React.useCallback((timeInSeconds: number) => { const minutes = Math.floor(timeInSeconds / 60); const seconds = Math.floor(timeInSeconds % 60); return `${minutes}:${seconds.toString().padStart(2, "0")}`; }, []); // Calculate progress percentage const progress = (currentTime / totalDuration) * 100; // Update progress when playing React.useEffect(() => { let intervalId: NodeJS.Timeout; if (isPlaying && currentTime < totalDuration) { intervalId = setInterval(() => { setCurrentTime((prev) => { if (prev >= totalDuration) { clearInterval(intervalId); setIsPlaying(false); return totalDuration; } return prev + 1; }); }, 1000); } return () => { if (intervalId) clearInterval(intervalId); }; }, [isPlaying, currentTime, totalDuration]); // Handle play/pause const handlePlayPause = () => { setIsPlaying(!isPlaying); }; // Handle seek const handleSeek = ( e: | React.MouseEvent | React.KeyboardEvent ) => { const bar = e.currentTarget.parentElement; if (!bar) return; const rect = bar.getBoundingClientRect(); let percent: number; if ("clientX" in e) { // Mouse event const x = e.clientX - rect.left; percent = x / rect.width; } else { // Keyboard event switch (e.key) { case "ArrowLeft": percent = (currentTime - 5) / totalDuration; break; case "ArrowRight": percent = (currentTime + 5) / totalDuration; break; default: return; } } const newTime = percent * totalDuration; setCurrentTime(Math.min(Math.max(0, newTime), totalDuration)); }; return (

{/* Profile Image */}

{/* Progress Bar */}

{/* Background gradient */}

{/* Progress indicator */}

{/* Shine effect */}

{/* Interactive seek button (invisible but functional) */}

{formatTime(currentTime)} {formatTime(totalDuration)}

{isPlaying ? ( ) : ( )}

); } export default NotificationCenter;85:["$","$L8f",null,{"chatId":"XBrDoy0UAWY","children":["$","$L90",null,{"data":{"@\"active-block\",\"XBrDoy0UAWY\",":{"id":"b_HXUsH6xbbde","messageId":"KNdaykKEL0TdymtaFnUpzbbQrc8EALjd","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"XBrDoy0UAWY\",":false,"":null},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This